import { useState, useEffect } from "react";
import { Form, Select, Divider, Checkbox, message } from "antd";
import { CommonModal } from "@/views/components/CommonModal";
import { uniquecodesCancelMarkExc, beforeCancelMarkExc } from "../service";
import SubTitle from "@/pages/OrderModule/common/components/SubTitle";

const UnProductAbnormalModal = ({ visible, query, checkedRows, fetchList, handleOk, handleCancel }) => {
	const [form] = Form.useForm();
	const [loading, setLoading] = useState(false);
	const [codesArrayNum, setCodesArrayNum] = useState(false); //去支付弹窗
	const [checkedList, setCheckedList] = useState([]);
	const exceptionFlagConfig = {
		0: '手动标记异常',
		1: '其他原因',
		2: '到货时间',
		5: '不确定何时有货',
		6: '下架',
		7: '门店未开门',
	}
	const [exceptionFlagOptions, setExceptionFlagOptions] = useState([])
	// 勾选唯一码数
	const [allExceptionFlagNums, setAllExceptionFlagNums] = useState(0)
	// 处理唯一码数
	const [checkExceptionFlagNums, setCheckExceptionFlagNums] = useState(0)

	useEffect(() => {
		const codesArray = checkedRows.map(item => item.code);
		setAllExceptionFlagNums(codesArray.length)
		setCodesArrayNum(codesArray);
		if (visible) {
			getbeforeCancelMarkExc({
				codeList: codesArray
			});
			form.resetFields();
		}
	}, [visible]);

	// 获取
	const getbeforeCancelMarkExc = async (data) => {
		const res = await beforeCancelMarkExc(data)
		let allCount = 0
		let excTypeList = []
		const options = res?.data?.map(item => {
			allCount += item.count
			excTypeList.push(item?.excType)
			return {
				label: exceptionFlagConfig[item?.excType],
				count: item?.count,
				value: item?.excType,
			}
		})
		// 点击弹窗默认选中所有异常标签
		form.setFieldsValue({
			excType: excTypeList
		})
		setCheckedList(excTypeList);
		setCheckExceptionFlagNums(allCount)
		setExceptionFlagOptions(options)
	}

	const onOk = () => {
		form.validateFields().then(async value => {
			const { success } = await uniquecodesCancelMarkExc({
				codeList: codesArrayNum,
				excType: checkedList
			});
			if (success) {
				message.success("操作成功");
				onCancel();
				fetchList();
			}
			setLoading(false);
		});
	};
	const onCancel = () => {
		handleCancel();
		form.resetFields();
	};
	const onChange = list => {
		// 计算选择的count数
		const checkNums = exceptionFlagOptions?.filter(f => list.includes(f?.value)).reduce((all, currect) => all += currect.count, 0)
		setCheckExceptionFlagNums(checkNums)
		setCheckedList(list);
	};

	return (
		<CommonModal title={{ title: "取消标记异常" }} visible={true} width="646px" onOk={onOk} onCancel={onCancel} minHeight="150px">
			<Form form={form} name="mark-unuaual-modal">
				<div style={{ marginBottom: '14px' }}>
					<span style={{ marginRight: '24px' }}>
						勾选唯一码数：<span style={{ color: "rgba(240, 61, 41, 1)" }}>{allExceptionFlagNums}</span>
					</span>
					<span>
						处理异常数：<span style={{ color: "rgba(240, 61, 41, 1)" }}>{checkExceptionFlagNums}</span>
					</span>
				</div>
				<Form.Item label="" name="excType">
					<Checkbox.Group onChange={onChange}>
						<div style={{ display: "flex", flexWrap: "wrap", justifyContent: "flex-start" }}>
							{exceptionFlagOptions.map(x => (
								<div style={{ flex: "0 0 30%", marginBottom: 14 }}>
									<Checkbox value={x.value}>{x.label}&nbsp;<span style={{ color: "rgba(240, 61, 41, 1)" }}>{x.count}</span></Checkbox>
								</div>
							))}
						</div>
					</Checkbox.Group>
				</Form.Item>
			</Form>
		</CommonModal>
	);
};

export default UnProductAbnormalModal;
